<template>
  <div class="home-page">

    <!--轮播展示区-与排行榜 -->
    <section class="carousel-container">
      <div class="carousel-wrapper">
        <section class="carousel">
          <div class="carousel-content" :style="{ transform: carouselTransform }">
            <div v-for="(slide, index) in slides" :key="index" class="carousel-slide">
              <img :src="slide.src" :alt="slide.alt">
            </div>
          </div>
          <div class="carousel-dots">
            <span
              v-for="(slide, index) in slides"
              :key="index"
              class="dot"
              :class="{ active: currentSlide === index }"
              @click="setSlide(index)"
            ></span>
          </div>
        </section>
        
        <!-- 排行榜模块 -->
        <div class="ranking">
          <div class="ranking-header">
            <h2>学习排行榜</h2>
            <div class="chart-toggle">
              <button @click="showChart = true" :class="{active: showChart}">图表</button>
              <button @click="showChart = false" :class="{active: !showChart}">列表</button>
            </div>
          </div>
          
          <!-- 折线图展示 -->
          <div class="chart-container" v-if="showChart">
            <!-- 修改 canvas 元素，移除 width 属性，通过样式控制宽度 -->
            <canvas ref="scoreChart" height="200"></canvas>
          </div>
          
          <!-- 列表展示 -->
          <div class="ranking-content" v-else>
            <div class="top-three">
              <div class="podium second" v-if="rankingItems[1]">
                <div class="medal">🥈</div>
                <div class="student-info">
                  <span class="name">{{ rankingItems[1].name }}</span>
                  <span class="score">{{ rankingItems[1].score }}</span>
                </div>
              </div>
              
              <div class="podium first" v-if="rankingItems[0]">
                <div class="medal">🥇</div>
                <div class="student-info">
                  <span class="name">{{ rankingItems[0].name }}</span>
                  <span class="score">{{ rankingItems[0].score }}</span>
                </div>
              </div>
              
              <div class="podium third" v-if="rankingItems[2]">
                <div class="medal">🥉</div>
                <div class="student-info">
                  <span class="name">{{ rankingItems[2].name }}</span>
                  <span class="score">{{ rankingItems[2].score }}</span>
                </div>
              </div>
            </div>
            
            <div class="other-rankings">
              <div 
                class="ranking-card" 
                v-for="(item, index) in rankingItems.slice(3)" 
                :key="index"
              >
                <span class="rank">#{{ index + 4 }}</span>
                <span class="name">{{ item.name }}</span>
                <span class="score">{{ item.score }}</span>
                <div class="progress-bar">
                  <div 
                    class="progress-fill" 
                    :style="{width: (item.score / rankingItems[0].score * 100) + '%'}"
                  ></div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 我的排名卡片 -->
          <div class="my-ranking-card">
            <div class="my-rank">
              <span>我的排名</span>
              <strong>第6名</strong>
            </div>
            <div class="my-score">
              <span>我的得分</span>
              <strong>90.5</strong>
            </div>
            <div class="my-progress">
              <span>距离前一名</span>
              <strong>+2.3分</strong>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 修改后的功能选择区 -->
    <section class="function-selector">
      <div class="selector-container">
        <div class="selector-buttons">
          <button 
            v-for="(tab, index) in tabs" 
            :key="index"
            @click="activeTab = index"
            :class="{ active: activeTab === index }"
          >
            <i class="material-icons">{{ index === 0 ? 'dashboard' : 'collections_bookmark' }}</i>
            <span>{{ tab.name }}</span>
          </button>
        </div>
        
        <div class="tab-content">
          <!-- 核心功能模块应放在此处 -->
          <div v-if="activeTab === 0">
            <h3>核心功能</h3>
            <div class="function-modules">
              <!-- 修改为 AI 生成模块 -->
              <div class="function-module" @click="$router.push({ name: 'AIGeneration' })">
                <i class="material-icons">auto_fix_high</i> <!-- 可根据需求更换图标 -->
                <h4>AI 生成</h4>
                <p>利用 AI 智能生成课程内容、题目等教学资源</p>
              </div>
              <!-- 修改为练习模块 -->
              <div class="function-module" @click="$router.push({ name: 'PracticePage' })">
                <i class="material-icons">assignment</i> <!-- 可根据需求更换图标 -->
                <h4>练习</h4>
                <p>为学生提供丰富的练习题目，巩固知识学习</p>
              </div>
            </div>
          </div>
          <div v-if="activeTab === 1">
            <div class="course-header">
              <h3>热门课程推荐</h3>
              <button class="more-button">更多 ></button>
            </div>
            <div class="course-modules">
              <div class="course-module">
                <img src="@/assets/images/087e3e6fb20f07d6724ae8252c23311.jpg" alt="量子物理基础">
                <h4>量子物理基础</h4>
                <p>探索微观世界的奇妙现象</p>
                <button class="start-button">开始学习</button>
              </div>
              <div class="course-module">
                <img src="@/assets/images/c1bab850092afc9995d5c21f536cc49.jpg" alt="星际航行原理">
                <h4>星际航行原理</h4>
                <p>掌握跨星系旅行的核心技术</p>
                <button class="start-button">开始学习</button>
              </div>
              <div class="course-module">
                <img src="@/assets/images/e7ac701a2beb40a6f340f022306dbf8.jpg" alt="外星语言学">
                <h4>外星语言学</h4>
                <p>学习与外星文明沟通的技巧</p>
                <button class="start-button">开始学习</button>
              </div>
              <div class="course-module">
                <img src="@/assets/images/087e3e6fb20f07d6724ae8252c23311.jpg" alt="曲率引擎技术">
                <h4>曲率引擎技术</h4>
                <p>理解空间扭曲驱动的原理</p>
                <button class="start-button">开始学习</button>
              </div>
            </div>
          </div>
        </div>
      </div> <!-- 新增闭合标签 -->
    </section>

    <!-- 底部信息区 -->
    <footer class="footer">
      <p>© 2025 跨星际高铁教育平台 版权所有</p>
      <div class="contact-info">
        <span>邮箱: contact@star-rail.edu</span>
        <span>电话: 400-123-4567</span>
      </div>
      <div class="social-links">
        <!-- 社交媒体图标 -->
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed, watch, nextTick } from 'vue'
// 导入图片
import banner1 from '@/assets/images/屏幕截图 2025-05-18 231844.png'
import banner2 from '@/assets/images/屏幕截图 2025-05-18 232006.png'
import banner3 from '@/assets/images/屏幕截图 2025-05-18 232033.png'
import Chart from 'chart.js/auto'

// 学生得分排行榜数据
const rankingItems = ref([
  { name: '张三', score: '98.5' },
  { name: '李四', score: '96.2' },
  { name: '王五', score: '91.0' },
  { name: '赵六', score: '90.7' },
  { name: '钱七', score: '87.1' }
])

const slides = ref([
  { src: banner1, alt: '星际教育1' },
  { src: banner2, alt: '星际教育2' },
  { src: banner3, alt: '星际教育3' }
])

const currentSlide = ref(0)
let intervalId = null

const carouselTransform = computed(() => `translateX(-${currentSlide.value * 100}%)`)

const nextSlide = () => {
  currentSlide.value = (currentSlide.value + 1) % slides.value.length
}

const setSlide = (index) => {
  console.log('Setting slide to index:', index); // 添加日志，方便调试
  currentSlide.value = index;
}

onMounted(() => {
  intervalId = setInterval(nextSlide, 3000)
})

onUnmounted(() => {
  clearInterval(intervalId)
})

// 功能选择区数据
const tabs = ref([
  { name: '核心功能' },
  { name: '热门课程推荐' }
])
// 修改 activeTab 的初始值为 1
const activeTab = ref(1)

// 添加调试日志
watch(activeTab, (newValue) => {
  console.log('当前激活的标签页索引:', newValue)
})
const showChart = ref(false)
const scoreChart = ref(null)
let chartInstance = null

// 监听 showChart 的变化
watch(showChart, async (newValue) => { // 改为async函数
  if (newValue) {
    await nextTick() // 等待DOM更新完成（关键修复）
    if (scoreChart.value) {
      if (chartInstance) {
        chartInstance.destroy()
      }
      chartInstance = new Chart(scoreChart.value, {
        type: 'line',
        data: {
          labels: rankingItems.value.map((_, i) => `第${i + 1}名`),
          datasets: [{
            label: '得分趋势',
            data: rankingItems.value.map(item => parseFloat(item.score)), // 确保数据为数字类型
            borderColor: '#8b5cf6',
            backgroundColor: 'rgba(139, 92, 246, 0.2)',
            tension: 0.3,
            fill: true
          }]
        },
        options: {
          responsive: true,
          plugins: {
            legend: {
              position: 'top',
            }
          }
        }
      })
    }
  } else if (chartInstance) {
    chartInstance.destroy()
  }
})
</script>

<style scoped>
.home-page {
  /* background-color: #1a1a1a; */
  color: white;
  font-family: 'Noto Sans SC', sans-serif;
  /* padding-top: 2rem; 新增顶部内边距 */
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #252525;
  position: sticky; /* 新增粘性定位 */
  top: 0;
  z-index: 100;
}

.nav-links a {
  color: white;
  margin: 0 1rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.nav-links a:hover {
  color: #8b5cf6;
  text-decoration: underline;
}

.carousel-container, 
.function-selector,
.footer {
  max-width: 1400px; /* 从1200px增加到1400px */
  margin: 0 auto ;
  margin-bottom:0px;
  padding:  1rem;
  
}

.carousel-container {
  max-width: 1600px; /* 从1400px增加到1600px */
  margin: 0 auto;
  padding: 0 2rem; /* 增加左右内边距 */
}

.carousel-wrapper {
  display: flex;
  gap: 2rem; /* 增加间距 */
  width: 100%;
}

.carousel {
  width: 70%;
  height: 500px; /* 修改高度与排行榜模块一致 */
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  border-radius: 20px; /* 新增圆角样式 */
}

.carousel-content {
  display: flex;
  height: 100%;
  transition: transform 0.5s ease;
  width: calc(100% * ${slides.value.length})
}

.carousel-slide {
  min-width: 100%;
  height: 100%;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  /* 确保图片完全填满容器 */
  object-fit: cover; 
  object-position: center;
}

.carousel-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  margin: 0 5px;
  cursor: pointer;
}

.dot.active {
  background: #8b5cf6;
}

.core-features, .popular-courses {
  padding: 4rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.feature-card {
  background: rgba(89, 89, 89, 0.7);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(139, 92, 246, 0.3);
}

.footer {
  padding: 2rem;
  text-align: center;
  background-color: #252525;
  color: #aaa;
  max-width: 1600px;
  margin: 0 auto;
  padding: 2rem;
}

.ranking {
  width: 30%;
  background: rgba(30, 30, 30, 0.8);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
}

.ranking-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.ranking-header h2 {
  color: #8b5cf6;
  font-size: 1.5rem;
  margin: 0;
}

.chart-toggle {
  display: flex;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

.chart-toggle button {
  padding: 0.5rem 1rem;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.3s ease;
}

.chart-toggle button.active {
  background: rgba(139, 92, 246, 0.3);
  color: white;
}

.chart-container {
  /* 让容器宽度占满父元素 */
  width: 100%; 
  height: 200px;
  margin-bottom: 1.5rem;
}

.chart-container canvas {
  /* 让 canvas 元素宽度占满容器 */
  width: 100% !important; 
  height: 100% !important;
}
.top-three {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 2rem;
}

.podium {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
}

.podium:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.podium.first {
  height: 140px;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.2));
}

.podium.second {
  height: 120px;
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.1), rgba(192, 192, 192, 0.2));
}

.podium.third {
  height: 100px;
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.1), rgba(205, 127, 50, 0.2));
}

.medal {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.student-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.student-info .name {
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.student-info .score {
  color: #8b5cf6;
  font-weight: bold;
}

.other-rankings {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ranking-card {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.ranking-card:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateX(5px);
}

.ranking-card .rank {
  width: 30px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
}

.ranking-card .name {
  flex: 1;
  font-weight: 500;
}

.ranking-card .score {
  color: #8b5cf6;
  font-weight: bold;
  margin: 0 1rem;
}

.progress-bar {
  width: 80px;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #8b5cf6, #6d28d9);
  border-radius: 3px;
}

.my-ranking-card {
  margin-top: 2rem;
  padding: 1.25rem;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(139, 92, 246, 0.2));
  border-radius: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.my-ranking-card > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.my-ranking-card span {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.25rem;
}

.my-ranking-card strong {
  font-size: 1.1rem;
  color: white;
}

.selector-buttons button {
  padding: 0.5rem 1rem;
  background: rgba(51,51,51,0.7);
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.selector-buttons button.active {
  background: #8b5cf6;
}

.selector-buttons button:hover {
  background: #7c3aed;
}

.tab-content {
  background: rgba(51,51,51,0.7);
  border-radius: 8px;
  padding: 1.5rem;
  min-height: 200px;
}

.feature-modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.feature-module {
  background: rgba(51,51,51,0.5);
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  transition: all 0.3s ease;
  /* 确保元素可见 */
  display: block; 
}

.feature-module:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(139, 92, 246, 0.2);
}

.feature-module i {
  font-size: 2.5rem;
  color: #8b5cf6;
  margin-bottom: 1rem;
}

.feature-module h4 {
  margin: 0.5rem 0;
  color: white;
}

.feature-module p {
  color: #aaa;
  font-size: 0.9rem;
}
</style>
<style scoped>
.course-modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.course-module {
  background: rgba(51,51,51,0.5);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.course-module:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(139, 92, 246, 0.2);
}

.course-module img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.course-module h4 {
  margin: 0.75rem 1rem 0.25rem;
  color: white;
}

.course-module p {
  margin: 0 1rem 1rem;
  color: #aaa;
  font-size: 0.9rem;
}

.start-button {
  display: block;
  width: 80%;
  margin: 0.5rem auto 1rem;
  padding: 0.5rem;
  background: #8b5cf6;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.start-button:hover {
  background: #7c3aed;
  transform: translateY(-2px);
}
</style>

<style scoped>
.course-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.more-button {
  background: transparent;
  border: none;
  color: #8b5cf6;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0.5rem 0;
  transition: all 0.3s ease;
}

.more-button:hover {
  color: #7c3aed;
  transform: translateX(3px);
}
</style>

<style scoped>
.course-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.more-button {
  background: transparent;
  border: none;
  color: #8b5cf6;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0.5rem 0;
  transition: all 0.3s ease;
}

.more-button:hover {
  color: #7c3aed;
  transform: translateX(3px);
}
</style>

<style scoped>
.function-selector {
  max-width: 1600px;
  margin: 2rem auto;
  padding: 0 2rem;
}

.selector-container {
  display: flex;
  gap: 3rem; /* 增加间距 */
}

.selector-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 180px;
}

.selector-buttons button {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: rgba(51, 51, 51, 0.5);
  border: none;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
}

.selector-buttons button:hover {
  background: rgba(139, 92, 246, 0.2);
  transform: translateX(5px);
}

.selector-buttons button.active {
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.3), transparent);
  color: white;
  border-left: 3px solid #8b5cf6;
}

.selector-buttons i {
  font-size: 1.2rem;
  color: #8b5cf6;
}

.tab-content {
  flex: 1;
  padding: 1.5rem;
  min-height: 200px;
}
</style>

<style scoped>
/* 核心功能区样式 */
.function-modules {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
}

.function-module {
  flex: 1;
  background: rgba(51, 51, 51, 0.7);
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.function-module:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(139, 92, 246, 0.3);
  background: rgba(51, 51, 51, 0.8);
}

.function-module i {
  font-size: 3rem;
  color: #8b5cf6;
  margin-bottom: 1.5rem;
  display: inline-block;
}

.function-module h4 {
  margin: 1rem 0;
  color: white;
  font-size: 1.5rem;
  font-weight: 600;
}

.function-module p {
  color: #aaa;
  font-size: 1rem;
  line-height: 1.6;
}
</style>
